<template>
	<el-form ref="ruleFormRef" label-position="top" :model="formInline" :rules="formRules" label-width="auto"
		v-loading="isLoading">
		<el-row :gutter="30">


			<re-col :value='12' :xs='24'>
				<el-form-item :label='titles?.mainteName' prop='mainteName'>
					<el-input :maxlength="30" :show-word-limit="true" v-model='formInline.mainteName' clearable :placeholder='prompt?.mainteName' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' >
				<el-form-item :label="titles?.contractNO" prop='contractNO'>
					<el-input v-model='formInline.contractNO' clearable :placeholder='prompt?.contractNO' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' >
				<el-form-item :label='titles?.mainteUnityName' prop='mainteUnityName'>
					<el-input :maxlength="30" :show-word-limit="true" v-model='formInline.mainteUnityName' clearable :placeholder='prompt?.mainteUnityName' />
				</el-form-item>
			</re-col>

			<re-col :value='12' :xs='24' >
				<el-form-item :label='titles?.unityAddress' prop='unityAddress'>
					<el-input :maxlength="30" :show-word-limit="true" v-model='formInline.unityAddress' clearable :placeholder='prompt?.unityAddress' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' >
				<el-form-item :label='titles?.beginDate' prop='beginDate'>
					<el-date-picker value-format="YYYY-MM-DD" :style="{ width: width }" v-model="formInline.beginDate"
						type="date" :placeholder='prompt?.beginDate' />

				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' >

				<el-form-item :label='titles?.endDate' prop='endDate'>
					<el-date-picker value-format="YYYY-MM-DD" :style="{ width: width }" v-model="formInline.endDate"
						type="date" :placeholder='prompt?.endDate' />


				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' >

				<el-form-item :label='titles?.circle' prop='endDate'>
					<el-select v-model="formInline.circle" placeholder="请选择维保周期" size="large">
						<el-option v-for="item in circleOptions" :key="item.value" :label="item.label"
							:value="item.label" />
					</el-select>
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' >
				<el-form-item :label='titles?.status' prop='status'>
					<el-radio-group v-model="formInline.status">
						<el-radio v-for="item in MAINTENANCE" :key="item.value" :value="item.value">
							{{ isNullOrEmpty( item.label ) }}
						</el-radio>
					</el-radio-group>
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' >
				<!-- {{ formInline.annexFiles }} -->
				<el-form-item :label='titles?.annex' prop='annex'>
					<UploadFile v-model:files='formInline.annexFiles' :addORupdate="addORupdate" :limit="100" accept='.doc,.docx,.png'></UploadFile>
				</el-form-item>
			</re-col>

		</el-row>
	</el-form>
</template>

<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import UploadFile from '@/components/ReUpload/maintenanceUpload.vue'
import { MAINTENANCE } from "@/constant/maintenance-management"
import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
import { titles, prompt } from './index';
import type { infoType } from '@/api/operate/maintenance/contract/index';

type FormProps = {
	formInline: infoType,
	isLoading: boolean,
	addORupdate:any
}
const width = ref('100%')
const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({} as infoType),
	isLoading: false,
	addORupdate:null
});


const formRules = reactive(<FormRules>{}); // 表单验证规则
//循环36个月
const circleOptions = Array.from({ length: 36 }, (_, index) => ({
	value: index + 1,
	label: `${index + 1}个月`
}))



const ruleFormRef = ref();
function getRef() {
	return ruleFormRef.value;
}

defineExpose({ getRef });
</script>